<script setup>
import { onMounted } from 'vue';
import echarts from '../echarts'


onMounted(() => {
    // lineChart 绘制
    var lineChartDom = document.getElementById('line');
    var lineChart = echarts.init(lineChartDom);
    var lineOption = {
        title:{
            text: "商品分类曲线"
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ],
        axisPointer: {
            link: { xAxisIndex: 'all' },
            label: {
                backgroundColor: '#777'
            }
        },
    };
    lineOption && lineChart.setOption(lineOption);
    // barChart 绘制
    var barChartDom = document.getElementById('bar');
    var barChart = echarts.init(barChartDom);
    var barOption = {
        title:{
            text: "热门商品统计"
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };
    barOption && barChart.setOption(barOption);
})



</script>
<template>
    <div class="index">
        <div class="charts">
            <div id="line"></div>
            <div id="bar"></div>
        </div>
    </div>
</template>
<style scoped>
.index {
    text-align: center;
    width: 100%;
    height: 100%;
}

.charts {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* background-color: aqua; */
}
#line {
    width: 50%;
    height: 80%;
}
#bar {
    width: 50%;
    height: 80%;
}
</style>